CSS Box Shadow Generator
Create beautiful box shadows with real-time preview
100%
Generated CSS
box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 1);CSS Gradient Generator
Create stunning linear and radial gradients
deg
Generated CSS
background: linear-gradient(45deg, #ff0000 0%, #0000ff 100%);Flexbox Playground
Learn and experiment with CSS Flexbox properties
Container Properties
Selected Item Properties
Click an item to edit its properties
ratio
ratio
1
2
3
Generated CSS
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
align-content: stretch;
}CSS Clip Path Generator
Create complex shapes with CSS clip-path
50%
Polygon Mode: Click on the preview to add points, drag existing points to modify the shape.
Tips: Right-click any point to remove it (minimum 3 points required).
Points: 0
Generated CSS
clip-path: circle(50% at 50% 50%);Regular Expression Tester
Test and debug regular expressions with real-time feedback
Results
0 matches found
Enter a regex pattern and test string to see matches highlighted here.
Matches & Capture Groups
No matches found
Color Contrast Checker
Ensure your color combinations meet WCAG accessibility standards
Quick Presets
Normal text (16px) - The quick brown fox jumps over the lazy dog.
Large text (24px) - The quick brown fox jumps over the lazy dog.
Contrast Ratio
21:1
WCAG Compliance
AA Normal
PASS
≥ 4.5:1
AA Large
PASS
≥ 3:1
AAA Normal
PASS
≥ 7:1
AAA Large
PASS
≥ 4.5:1